<template>
  <div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            placeholder="通过xxx搜索xxx,记得回车哦..."
            v-model="keyword"
            clearable
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="false"
            prefix-icon="el-icon-search">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchEntity">搜索
          </el-button>
          <el-button slot="reference" type="primary" @click="advanceSearchViewVisible = true" size="mini" style="margin-left: 5px">
            <i class="fa fa-lg" style="margin-right: 5px"></i>高级搜索
          </el-button>
        </div>
        <div style="margin-left: 5px;margin-right: 20px;display: inline">
          <el-popover
            placement="left-start"
            width="200"
            v-model="popoverUploadVisible">
            <div style="padding: 5px">
              <el-button size="mini"><i class="el-icon-download"></i>文件格式</el-button>
              <el-upload
                class="upload-demo"
                action="https://www.demo.com/posts/"
                multiple
                :limit="3">
                <el-button type="primary" size="mini"><i class="el-icon-upload2"></i>文件上传</el-button>
              </el-upload>
            </div>
            <el-button slot="reference" type="primary" size="mini"><i class="fa fa-lg fa-level-down" style="margin-right: 5px" @click="openUploadView"></i>文件操作
            </el-button>
          </el-popover>
        </div>
      </el-header>
      <el-main>
        <div>
          <el-table
            :data="trainingplans"
            size="mini"
            style="width: 100%"
            stripe

            v-loading="loading"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              align="left"
              width="30">
            </el-table-column>
            <el-table-column
              prop="name"
              align="left"
              label="中文名称"
              width="200">
            </el-table-column>
            <el-table-column
              prop="englishName"
              align="left"
              label="英文名称"
              width="200">
            </el-table-column>
            <el-table-column
              prop="major.name"
              align="left"
              label="关联专业"
              width="150">
            </el-table-column>
            <el-table-column
              prop="statue"
              align="left"
              label="状态"
              width="100">
              <template slot-scope="scope">{{scope.row.statue == '1'?'Normal':'Del'}}</template>
            </el-table-column>
            <el-table-column
              prop="createby"
              align="left"
              label="创建人"
              width="100">
              <template slot-scope="scope">{{scope.row.createby == '1'?'宁哥':'凯哥'}}</template>
            </el-table-column>
            <el-table-column
              prop="editby"
              align="left"
              label="修改人"
              width="100">
              <template slot-scope="scope">{{scope.row.editby == '1'?'凯哥':'宁哥'}}</template>
            </el-table-column>
            <el-table-column
              prop="createtime"
              align="left"
              label="创建时间"
              width="120">
              <template slot-scope="scope">{{scope.row.createtime | formatDate}}</template>
            </el-table-column>
            <el-table-column
              prop="edittime"
              align="left"
              label="修改时间"
              width="120">
              <template slot-scope="scope">{{scope.row.edittime | formatDate}}</template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              width="200">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit" @click="openUpdateView(scope.row)">修改课程计划</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top: 5px">
            <el-col :span="20" :pull="5">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageSize"
                :page-sizes="[10,15,20,50]"
                :page-size="pageNumber"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
    <el-dialog width="80%"
               :title="dialogTitle"
               :close-on-click-modal="false"
               style="padding: 0;"
               :visible.sync="dialogFormVisible">
      <el-row :gutter="20">
        <el-col :span="2"><el-button type="primary" icon="el-icon-plus" size="mini" @click="openSecondSaveView">添加</el-button></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>
            <el-table
              :data="teachings"
              size="mini"
              style="width: 100%"
              stripe
              v-loading="loading">
              <el-table-column
                type="index"
                align="left"
                width="30">
              </el-table-column>
              <el-table-column
                type="expand"
                align="left"
                width="30">
                <template slot-scope="props">
                  <el-form label-position="left" class="demo-table-expand">
                    <el-form-item v-for="(item,index) in props.row.teachingSemesters" :key="index" :label="item.semester.semester">
                      :<span style="font-style: italic;font-family: 楷体;color: gray">{{ item.weekCount }}周</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                prop="course.name"
                align="left"
                label="课程名称"
                width="200">
              </el-table-column>
              <el-table-column
                prop="allCredit"
                align="left"
                label="总学分"
                width="80">
              </el-table-column>
              <el-table-column
                prop="theory"
                align="left"
                label="理论学时"
                width="100">
              </el-table-column>
              <el-table-column
                prop="practice"
                align="left"
                label="实践学时"
                width="100">
              </el-table-column>
              <el-table-column
                prop="statue"
                align="left"
                label="状态"
                width="100">
                <template slot-scope="scope">{{scope.row.statue == '1'?'Normal':'Del'}}</template>
              </el-table-column>
              <el-table-column
                prop="createby"
                align="left"
                label="创建人"
                width="100">
                <template slot-scope="scope">{{scope.row.createby == '1'?'宁哥':'凯哥'}}</template>
              </el-table-column>
              <el-table-column
                prop="editby"
                align="left"
                label="修改人"
                width="100">
                <template slot-scope="scope">{{scope.row.editby == '1'?'凯哥':'宁哥'}}</template>
              </el-table-column>
              <el-table-column
                prop="createtime"
                align="left"
                label="创建时间"
                width="120">
                <template slot-scope="scope">{{scope.row.createtime | formatDate}}</template>
              </el-table-column>
              <el-table-column
                prop="edittime"
                align="left"
                label="修改时间"
                width="120">
                <template slot-scope="scope">{{scope.row.edittime | formatDate}}</template>
              </el-table-column>
              <el-table-column
                label="操作"
                fixed="right"
                width="200">
                <template slot-scope="scope">
                  <el-button size="mini" icon="el-icon-edit" @click="openSecondUpdateView(scope.row)">编辑</el-button>
                  <el-button size="mini" icon="el-icon-edit" @click="deleteSecondEntity(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top: 5px">
              <el-col :span="20" :pull="5">
                <el-pagination
                  @size-change="handleSizeChangeSecond"
                  @current-change="handleCurrentChangeSecond"
                  :current-page="pageSizeSecond"
                  :page-sizes="[10,15,20,50]"
                  :page-size="pageNumberSecond"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalSecond">
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-dialog width="60%"
                 :title="dialogTitleSecond"
                 :close-on-click-modal="false"
                 style="padding: 0;"
                 :visible.sync="dialogFormVisibleSecond"
                 append-to-body>
        <el-form ref="saveform" :model="teaching" label-width="80px" size="mini">
          <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="课程:">
               <el-select v-model="teaching.courseId" placeholder="请选择课程" :filterable="true" clearable>
                 <el-option v-for="item in courses" :label="item.label" :key="item.key" :value="item.key"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
            <el-col :span="6">
              <el-form-item label="总学分:">
                <el-input v-model="teaching.allCredit" placeholder="总学分" clearable prefix-icon="el-icon-edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="理论:">
                <el-input v-model="teaching.theory" placeholder="理论学分" clearable prefix-icon="el-icon-edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实践:">
                <el-input v-model="teaching.practice" placeholder="实践学分" clearable prefix-icon="el-icon-edit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-for="(item, index) in teaching.teachingSemesters" :key="index">
           <el-col :span="6">
             <el-form-item label="学期:">
               <el-select v-model="item.semesterId" placeholder="学期">
                 <el-option v-for="item in semesters" :label="item.semester" :key="item.id" :value="item.id"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
            <el-col :span="6">
              <el-form-item label="周数">
                <el-input v-model="item.weekCount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button icon="el-icon-delete" size="mini" @click="removeSemesterWeekCount(item)">删除</el-button>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addSemesterWeekCount" size="mini" type="primary" circle icon="el-icon-plus"></el-button>
          <el-button @click="saveOrUpdateSecondEntity" size="mini">添加</el-button>
          <el-button @click="closeSecondSaveOrUpdateView" size="mini">关闭</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeSaveOrUpdateView" size="mini">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Teaching',
  data () {
    return {
      advanceSearchViewVisible: false,
      dialogFormVisible: false,
      popoverUploadVisible: false,
      loading: false,
      dialogTitle: '',
      pageSize: 1,
      pageNumber: 10,
      total: 10,
      multipleSelection: [],
      keyword: '',
      majors: [],
      trainingplanTypes: [],
      trainingplan: {
        name: '',
        englishName: '',
        majorId: ''
      },
      trainingplans: [],
      rules: {
        name: [{required: true, message: '必填:培养方案名称', trigger: 'blur'}],
        englishName: [{required: true, message: '必填:英文名称', trigger: 'blur'}],
        majorId: [{required: true, message: '必填:关联专业', trigger: 'blur'}]
      },
      teaching: {
        planId: '',
        courseId: '',
        allCredit: '',
        theory: '',
        practice: '',
        teachingSemesters: [
          {
            semesterId: '',
            weekCount: ''
          }
        ]
      },
      teachings: [],
      planId: '',
      pageSizeSecond: 1,
      pageNumberSecond: 10,
      totalSecond: 10,
      dialogTitleSecond: '',
      dialogFormVisibleSecond: false,
      courses: [],
      semesters: []
    }
  },
  created () {
    this.loadTable()
    this.initMajor()
    this.initCourses()
  },
  computed: {
    selectionChange () {
      return this.multipleSelection.length === 0
    }
  },
  methods: {
    initMajor () {
      let _this = this
      this.getRequest('/major/list/s').then(resp => {
        if (resp && resp.status === 200) {
          _this.majors = resp.data.list
        }
      })
    },
    loadTable () {
      let _this = this
      this.loading = true
      this.getRequest('/trainingplan/list?keyword=' + this.keyword + '&pageSize=' + this.pageSize + '&pageNumber=' + this.pageNumber).then(resp => {
        if (resp && resp.status === 200) {
          _this.trainingplans = resp.data.list
          _this.total = resp.data.total
        }
        this.loading = false
      })
    },
    searchEntity () {
      this.pageSize = 1
      this.loadTable()
    },
    openSaveView () {
      this.dialogTitle = '添加培养方案'
      this.dialogFormVisible = true
    },
    openUpdateView (item) {
      this.dialogTitle = '编辑课程计划'
      this.planId = item.id
      this.loadSecondTable()
      this.dialogFormVisible = true
    },
    saveOrUpdate (formName) {
      this.keyword = ''
      this.$refs[formName].validate(valid => {
        if (valid) {
          let _this = this
          if (this.trainingplan.id) {
            this.putRequest('/trainingplan/entity', this.trainingplan).then(resp => {
              if (resp && resp.status === 200) {
                this.$message({type: resp.data.status, message: resp.data.msg})
                _this.closeSaveOrUpdateView()
                _this.loadTable()
              }
            })
          } else {
            this.postRequest('/trainingplan/entity', this.trainingplan).then(resp => {
              if (resp && resp.status === 200) {
                this.$message({type: resp.data.status, message: resp.data.msg})
                _this.closeSaveOrUpdateView()
                _this.loadTable()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    deleteEntity (item) {
      let _this = this
      this.$confirm('此操作将删除该培养方案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest('/trainingplan/statue/' + item.id).then(resp => {
          if (resp && resp.status === 200) {
            _this.$message({
              type: resp.data.status,
              message: resp.data.msg
            })
            this.loadTable()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    closeSaveOrUpdateView () {
      this.emptyEntity()
      this.dialogFormVisible = false
    },
    emptyEntity () {
      this.trainingplan = {}
      this.trainingplan = {
        name: '',
        englishName: '',
        majorId: ''
      }
    },
    handleCascaderChange (item) {
      if (item.length === 0) {
        this.trainingplan.type = ''
        return
      }
      let id = item[item.length - 1]
      this.trainingplan.type = id
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageNumber = val
      this.loadTable()
    },
    handleSizeChangeSecond (val) {
      console.log(`每页 ${val} 条`)
      this.pageNumberSecond = val
      this.loadSecondTable()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageSize = val
      this.loadTable()
    },
    handleCurrentChangeSecond (val) {
      console.log(`当前页: ${val}`)
      this.pageSizeSecond = val
      this.loadSecondTable()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    openUploadView () {
      this.popoverUploadVisible = true
    },
    openSecondSaveView () {
      this.dialogTitleSecond = '新增'
      this.initSemester(this.planId)
      this.dialogFormVisibleSecond = true
    },
    openSecondUpdateView () {
    },
    loadSecondTable () {
      let _this = this
      this.getRequest('/teaching/list?pageSize=' + this.pageSizeSecond + '&pageNumber=' + this.pageNumberSecond + '&planId=' + this.planId).then(resp => {
        if (resp && resp.status === 200) {
          _this.teachings = resp.data.list
          _this.totalSecond = resp.data.total
        }
      })
    },
    deleteSecondEntity () {},
    closeSecondSaveOrUpdateView () {
      this.emptyTeachingEntity()
      this.dialogFormVisibleSecond = false
    },
    emptyTeachingEntity () {
      this.teaching = {
        planId: '',
        courseId: '',
        allCredit: '',
        theory: '',
        practice: '',
        teachingSemesters: [
          {
            semesterId: '',
            weekCount: ''
          }
        ]
      }
    },
    initCourses () {
      let _this = this
      this.getRequest('/course/initMain').then(resp => {
        if (resp && resp.status === 200) {
          _this.courses = resp.data.list
        }
      })
    },
    addSemesterWeekCount () {
      this.teaching.teachingSemesters.push({semesterId: '', weekCount: ''})
    },
    removeSemesterWeekCount (item) {
      let index = this.teaching.teachingSemesters.indexOf(item)
      if (index !== -1) {
        this.teaching.teachingSemesters.splice(index, 1)
      }
    },
    initSemester () {
      let _this = this
      this.getRequest('/semester/plan/' + this.planId).then(resp => {
        if (resp && resp.status === 200) {
          _this.semesters = resp.data.list
        }
      })
    },
    saveOrUpdateSecondEntity () {
      let _this = this
      this.teaching.planId = this.planId
      this.axios.post('/teaching/entity', this.teaching).then(resp => {
        if (resp && resp.status === 200) {
          _this.$message({type: resp.data.status, message: resp.data.msg})
          this.closeSecondSaveOrUpdateView()
          this.loadSecondTable()
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-main {
    padding-left: 0;
    padding-top: 0;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .upload-demo {
    display: inline;
  }
</style>
